<template>
	<div class="copyAnalysis">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'>
				<i class="icon iconfont">&#xe7d8;</i>
				当前位置 / 游戏内分析 / <span>{{title}}</span>
			</div>
		</div>
		<div class="choose_dialog fadeInDown animated">
			<div class="block">
				<el-form  class="demo-form-inline" :inline="true" :model="ruleForm">
					<el-form-item label="统计日期:" :label-width="formLabelWidth">
						 <el-date-picker
                            v-model="ruleForm.startDate"
                            type="daterange"
                            @change='dateChange'
                            placeholder="选择日期范围" :picker-options="pickerOptions0">
                            </el-date-picker>
					</el-form-item>
                   
					<el-form-item label="平台：" :label-width="formLabelWidth"  prop="platForm">
						<el-select v-model="ruleForm.platForm" filterable  placeholder="请选择平台" @change="platChange">
							<el-option v-for="(val,key) in platForms" :label="val.id" :value="val.num" :key='key'></el-option>
						</el-select>
					</el-form-item>                    
					<el-form-item label="渠道名称：" :label-width="formLabelWidth"  prop="channel">
						<el-select v-model="ruleForm.channel" filterable  placeholder="请选择渠道名称"  @change="channelChange">
							<el-option v-for="(val,key) in channels" :label="val.id" :value="val.num" :key='val.num'></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="全区服：" :label-width="formLabelWidth"  prop="server">
						<el-select v-model="ruleForm.server" filterable  placeholder="请选择全区服" @change="serverChange">
							<el-option v-for="(val,key) in servers" :label="val.id" :value="val.num" :key='key'></el-option>
						</el-select>
					</el-form-item>
                    <el-form-item label="任务类型：" :label-width="formLabelWidth"  prop="tasktT">
						<el-select v-model="ruleForm.tasktT" filterable  placeholder="请选任务类型" @change="tasktTChange">
							<el-option v-for="(val,key) in tasktTs" :label="val.id" :value="val.num" :key='key'></el-option>
						</el-select>
					</el-form-item>
                    <el-form-item label="任务名称：" :label-width="formLabelWidth"  prop="tasktU">
						<el-select v-model="ruleForm.tasktU" filterable  placeholder="请选择任务名称" @change="tasktUChange">
							<el-option v-for="(val,key) in tasktUs" :label="val.id" :value="val.num" :key='key'></el-option>
						</el-select>
					</el-form-item>					
					<el-form-item  class='conmit'>
						<el-button type="primary"  icon="search" @click="search()" :disabled="searchable">查询</el-button>
		    		</el-form-item>
				</el-form>
				<p style="color:#2eb398;text-align:center">（输入搜索条件，留空搜索全部！）</p>
			</div>
		</div>
		<div class="right_content">
            <div class="copyAnalysisTable"  style='margin-bottom:40px;'>
                <div class="copyAnalysisTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">
						参与率
                        	<el-button type="primary" size="mini" class="excel"  @click.stop="excel1('1','游戏内分析-副本分析-参与率')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1],"float":"right","marginTop":"5px","marginRight":"5px"}'>
								<i class="icon iconfont">&#xe7f0;</i>
								导出excel
							</el-button> 
					</span>
				</div>
                <div class="copyAnalysisTableBody fadeIn animated">
                    <template>
                        <el-table
                            v-loading="loading"
                            element-loading-text="拼命加载中"
                            :data="mtableb1"
                            border
                            style="width: 100%"
                            :default-sort = "{prop: 'dateStr', order: 'descending'}"
                            @sort-change="sortChage1"
                            >
                            <el-table-column
                            v-for="(col,key) in tableHead1"
                            :label="col.label"
                            :prop="col.prop"
                            :key="col.prop"
                            :sortable="col.sortable?false:true"
                            align="center"
                            min-width="180">
                            </el-table-column>
                        </el-table>
                    </template>						
					<div class="pages copyAnalysisPage">
						<el-pagination
							@size-change="handleSizeChange1"
							@current-change="handleCurrentChange1"
							:current-page="page1.currentPage"
							:page-sizes="page1.pageSizes"
							:page-size="page1.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page1.dataTotal">
						</el-pagination>
					</div>
				</div>
            </div>    
            <div class="copyAnalysisTable"  style='margin-bottom:40px;'>
				<div class="copyAnalysisTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">
						副本停留率
                        	<el-button type="primary" size="mini" class="excel"  @click.stop="excel1('2','游戏内分析-副本分析-副本停留率')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1],"float":"right","marginTop":"5px","marginRight":"5px"}'>
								<i class="icon iconfont">&#xe7f0;</i>
								导出excel
							</el-button> 
					</span>
				</div>
                 <div class="buttons">
					<el-button type="primary" :disabled="searchable" @click="getTableData(1)" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
					活跃用户停留率（Top15） <i style='color: #fff;' class='el-icon-check' v-show='activeIndex == "1"'></i>
					</el-button>
					<el-button type="primary" :disabled="searchable" @click="getTableData(2)" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
					新增次日流失停留率（Top15） <i style='color: #fff;' class='el-icon-check' v-show='activeIndex == "2"'></i>
					</el-button>
				</div>
				<div style="height:450px;width:100%;position:absolute;" v-if="realLoadShow" v-loading="realLoadShow" element-loading-text="拼命加载中"></div>
				<div class="realTimeData" id='realTimeData' style="height:450px"></div>
				<div class="copyAnalysisTableBody fadeIn animated">
                    <template>
                        <el-table
                            v-loading="loading"
                            element-loading-text="拼命加载中"
                            :data="mtableb2"
                            border
                            style="width: 100%"
                            :default-sort = "{prop: 'dateStr', order: 'descending'}"
                            @sort-change="sortChage2"
                            >
                            <el-table-column
                            v-for="(col,key) in tableHead2"
                            :label="col.label"
                            :prop="col.prop"
                            :key="col.prop"
                            :sortable="col.sortable?false:true"
                            align="center"
                            min-width="274">
                            </el-table-column>
                        </el-table>
                    </template>						
					<div class="pages copyAnalysisPage">
						<el-pagination
							@size-change="handleSizeChange2"
							@current-change="handleCurrentChange2"
							:current-page="page2.currentPage"
							:page-sizes="page2.pageSizes"
							:page-size="page2.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page2.dataTotal">
						</el-pagination>
					</div>
				</div>
            </div>
		</div>
         <a href="" :download="xlsxTitle+'.xlsx'" id="hf"></a> 
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./copyAnalysis.styl"></style>
<script src="./copyAnalysis.js"></script>
